<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>云鹿后台留言查询</title>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
				<el-menu-item index="1">留言记录</el-menu-item>
				<el-menu-item index="2">新增记录</el-menu-item>
			</el-menu>
			<div style="margin-top: 15px;" v-if="activeIndex == '1'">
				<el-table :data="AllAdvice" height='800' v-loading="loading" stripe style="width:100%;margin: auto;box-shadow: 0 0 5px black;">
					<el-table-column prop="ID" label="ID" width="100">
					</el-table-column>
					<el-table-column prop="NAME" label="姓名" width="200">
					</el-table-column>
					<el-table-column prop="PHONE" label="联系号码">
					</el-table-column>
					<el-table-column prop="CONTENT" label="内容" >
					</el-table-column>
					<el-table-column prop="CREATETIME" label="创建时间">
					</el-table-column>
					<el-table-column prop="MEMO" label="备注">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="200">
						<template slot-scope="scope">
							<el-button @click="UpdateStay(scope.row)" type="text" size="small">编辑</el-button>
							<el-button @click="Removue(scope.row.ID)" type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-else style="margin-top: 15px;width: 500px;">
				<el-form label-width="80px" :model="PostData">
					<el-form-item label="姓名">
						<el-input v-model="PostData.NAME"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="PostData.PHONE"></el-input>
					</el-form-item>
					<el-form-item label="内容">
						<el-input v-model="PostData.CONTENT"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="Add()">立即创建</el-button>
						<el-button @click="AddCancel()">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-dialog title="编辑信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-input placeholder="请修改联系人姓名" clearable v-model="UpdateStayRow.NAME">
					<template slot="prepend">姓名:</template>
				</el-input>
				<div style="margin-top: 15px;">
					<el-input placeholder="手机号/电话" clearable v-model="UpdateStayRow.PHONE">
						<template slot="prepend">联系方式:</template>
					</el-input>
				</div>
				<div style="margin-top: 15px;">
					<el-input type="textarea" autosize placeholder="请输入内容" v-model="UpdateStayRow.CONTENT">
					</el-input>
				</div>
				<div style="margin-top: 15px;">
					<el-input placeholder="对这条信息备注" clearable v-model="UpdateStayRow.MEMO">
						<template slot="prepend">备注:</template>
					</el-input>
				</div>
				<span slot="footer" class="dialog-footer">
    				<el-button @click="UpdateCancel">取 消</el-button>
    				<el-button type="primary" @click="UpdatedClick">修改</el-button>
 				 </span>
			</el-dialog>
			<!--<div style="border: 1px solid green;">
				<h3>在此新增</h3>
				<input type="text" placeholder="名字" v-model="PostData.NAME" /><br />
				<input type="text" placeholder="手机号" v-model="PostData.PHONE" /><br />
				<textarea v-model="PostData.CONTENT"></textarea>
				<button @click="Add()">新增一个</button>
			</div>-->
		</div>
	</body>
	<script type="text/javascript">
		var Cget = 'http://www.clouddeer-expo.com/api/LINK/GetAdvice';
		var Rid = 'http://www.clouddeer-expo.com/api/LINK/RemoveAdvice?ID=';
		var Add = 'http://www.clouddeer-expo.com/api/LINK/AddAdvice';
		var Update = 'http://www.clouddeer-expo.com/api/LINK/UpdateAdvice';

		function cloneObj(obj) {
			var str, newobj = obj.constructor === Array ? [] : {};
			if(typeof obj !== 'object') {
				return;
			} else if(window.JSON) {
				str = JSON.stringify(obj), //序列化对象
					newobj = JSON.parse(str); //还原
			} else {
				for(var i in obj) {
					newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
				}
			};
			return newobj;
		};
		var app = new Vue({
			el: '#app',
			data: {
				PostData: {
					"ID": null,
					"NAME": '',
					"PHONE": '',
					"CONTENT": '',
					"MEMO": ''
				},
				NeedUpdate: false,
				u: {},
				AllAdvice: [],
				dialogVisible: false,
				UpdateStayRow: '',
				loading: false,
				activeIndex: '1'
			},
			mounted() {
				this.GetAll();
			},
			methods: {
				handleSelect(key, keyPath) {
					console.log(key, keyPath);
					this.activeIndex = key;
				},
				handleClose(done) {
					this.$confirm('确认关闭？')
						.then(_ => {
							done();
						})
						.catch(_ => {});
				},
				GetAll() {
					this.loading = true;
					var _this = this;
					$.get(Cget).then(function(res) {
						if(res) {
							_this.AllAdvice = JSON.parse(res).Table;
							_this.loading = false;
						} else {
							_this.$message({
								message: '抱歉，暂时没有留言信息',
								type: 'warning'
							});
						}
					})
				},
				Removue(id) {
					var _this = this;
					$.get(Rid + id).then(function(res) {
						if(res == 1) {
							_this.$message({
								message: '恭喜你，删除成功',
								type: 'success'
							});
							_this.GetAll();
						} else {
							_this.$message.error('抱歉，删除失败');
							_this.GetAll();
						};
					})
				},
				Add() {
					var _this = this;
					$.post(Add, this.PostData).then(function(res) {
						console.log(res)
						if(res == 1) {
							_this.$message({
								message: '新增联系人成功',
								type: 'success'
							});
							_this.activeIndex='1';
							_this.GetAll();
						} else {
							_this.$message.error('新增，删除失败');
						}
					})
				},
				AddCancel() {
					this.PostData = {
						"ID": null,
						"NAME": '',
						"PHONE": '',
						"CONTENT": '',
						"MEMO": ''
					};
				},
				UpdateStay(row) {
					this.UpdateStayRow = cloneObj(row);
					this.dialogVisible = true;
				},
				UpdatedClick() {
					var _this = this;
					this.dialogVisible = false;
					var data = {
						"ID": this.UpdateStayRow.ID,
						"NAME": this.UpdateStayRow.NAME,
						"PHONE": this.UpdateStayRow.PHONE,
						"CONTENT": this.UpdateStayRow.CONTENT,
						"MEMO": this.UpdateStayRow.MEMO,
					};
					$.post(Update, data).then((res) => {
						if(res == 1) {
							_this.$message({
								message: '恭喜你，修改成功',
								type: 'success'
							});
							_this.GetAll();
						} else {
							_this.$message.error('抱歉，修改失败');
						};
					})
				},
				UpdateCancel() {
					this.dialogVisible = false;
					this.UpdateStayRow = '';
				},
			}
		})
	</script>

</html>